<script>

  function loadRoots() {
    $.ajax(
        {
          url: '?listGen&act=lsr',
          type: 'post',
          data: {sectionId: $('#sectionId').val()},
          beforeSend: function () {
            $('#loading').show();
          }
        }
    ).done(function (response) {
          $("#listRoots").html(response);
          $("#rootTitle").show();
          $('#listRoot').change(function () {
            $('#newRootTitle').show();
          });
          $('#loading').hide();
        })
  }

  function submitRootForm(act) {
    if (!($('#rootTitleInput').val() == "")) {
      $('#editRootForm').attr('action', $('#editRootForm').attr('action') + "&act=" + act);
      $('#editRootForm').submit();
    } else if (act == 'del') {
      $('#editRootForm').attr('action', $('#editRootForm').attr('action') + "&act=" + act);
      $('#editRootForm').submit();
    }
  }
</script>
<?php
/**
 * Created by PhpStorm.
 * User: Aliaksei Lazerka
 * Date: 10/23/14
 * Time: 9:36 PM
 */

$result = getMainCategories();

$output = "<select id='sectionId' name='sectionId' onchange='loadRoots()'>";

$output .= "<option style='text-align: center'>-- Выберите вариант из списка --</option>";

while ($row = mysql_fetch_assoc($result)) {
  $output .= "<option value='" . $row['ID'] . "'>" . $row['TITLE'] . "</option>";
}

$output .= "</select>";

?>

<form method="post" id="editRootForm" action="?eLR">
  <div class="step">
    <div class="stepInfo">
      1. Выберите категорию, в которой находится корневой элемент списка:
    </div>
    <div class="stepSelect">
      <?= $output ?>
    </div>
  </div>
  <div class="step" id="rootTitle">
    <div class="stepInfo">
      2. Выберите корневой элемент списка, который Вы хотите изменить/удалить:
    </div>
    <div class="stepSelect">
      <div id="listRoots">
      </div>
    </div>
  </div>
  <div class="step" id="newRootTitle">
    <div class="stepInfo">
      3. Введите новое название корневого элемента списка:
    </div>
    <div class="stepSelect">
      <input type="text" name="newRootTitle" id="rootTitleInput"/>
      <input type="button" value="Изменить"
             onclick="userAsk('Если Вы уверены, что хотите изменить данный элемент списка, - нажмите Изменить.', submitRootForm, 'edit')">
      <input type="button" value="Удалить"
             onclick="userAsk('Внимание ! После удаления восстановить элемент будет невозможно. Удаляются все элементы списка второго уровня, относящиеся к этому корневому элементу и вся продукция этих элементов. Вы действительно хотите продолжить ?', submitRootForm, 'del')">
    </div>
  </div>
</form>
